<template>
	<div class="layout-pd">
		<el-button plain @click="dialogFormVisible = true" type="primary"> 添加学生信息 </el-button>
		<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
			<el-table-column prop="id" label="id" width="100" />
			<el-table-column prop="sno" label="学生学号" width="400" />
			<el-table-column prop="sclass" label="学生班级" width="400" />
			<el-table-column prop="birthdate" label="出生日期" width="300" />
			<el-table-column prop="name" label="学生姓名" width="400" />
			<el-table-column label="操作" width="400">
				<template #default="scope">
					<el-button size="small" text type="primary" plain @click="dialogFormVisible1 = true">修改</el-button>
					<el-button size="small" text type="primary" plain @click="dialogFormVisible = false">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
	<!-- 添加框 -->
	<el-dialog v-model="dialogFormVisible" title="添加学生信息" width="500">
		<el-form :model="form">
			<el-form-item label="学生学号" :label-width="formLabelWidth">
				<el-input v-model="form.sno" autocomplete="off" />
			</el-form-item>
			<el-form-item type="datetime" label="出生日期" :label-width="formLabelWidth">
				<div class="demo-date-picker">
					<div class="block"><el-date-picker auto: style="width: 288px;" v-model="form.birthdate" type="date" :size="size"/></div>
				</div>
			</el-form-item>
			<el-form-item label="学生班级" :label-width="formLabelWidth">
				<el-input v-model="form.sclass" autocomplete="off" />
			</el-form-item>
			<el-form-item label="学生姓名" :label-width="formLabelWidth">
				<el-input v-model="form.name" autocomplete="off" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogFormVisible = false">退出</el-button>
				<el-button type="primary" @click="dialogFormVisible = false">确定</el-button>
			</div>
		</template>
	</el-dialog>
	<!-- 修改框 -->
	<el-dialog v-model="dialogFormVisible1" title="修改学生信息" width="500">
		<el-form :model="form">
			<el-form-item label="学生学号" :label-width="formLabelWidth">
				<el-input v-model="form.sno" autocomplete="off" />
			</el-form-item>
			<el-form-item type="datetime" label="出生日期" :label-width="formLabelWidth">
				<div class="demo-date-picker">
					<div class="block"><el-date-picker auto: style="width: 288px;" v-model="form.birthdate" type="date" :size="size"/></div>
				</div>
			</el-form-item>
			<el-form-item label="学生班级" :label-width="formLabelWidth">
				<el-input v-model="form.sclass" autocomplete="off" />
			</el-form-item>
			<el-form-item label="学生姓名" :label-width="formLabelWidth">
				<el-input v-model="form.name" autocomplete="off" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogFormVisible1 = false">退出</el-button>
				<el-button type="primary" @click="dialogFormVisible1 = false">确定</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="chartIndex">

// import { storeToRefs } from 'pinia';
// import { useUserInfo } from '/@/stores/userInfo';
// import { Session } from '/@/utils/storage';
// import { frontEndsResetRoute, setAddRoute, setFilterMenuAndCacheTagsViewRoutes } from '/@/router/frontEnd';
import { reactive, onMounted, ref } from 'vue';
import { studentApi } from '/@/api/student';
import { dataTool } from 'echarts';
// import { ElMessage, MessageParamsWithType } from 'element-plus';

// 定义变量内容
// const storesUserInfo = useUserInfo();
// const { userInfos } = storeToRefs(storesUserInfo);
// const userAuth = ref('');
// eslint-disable-next-line vue/no-dupe-keys
const dialogFormVisible = ref(false);
const dialogFormVisible1 = ref(false);
const formLabelWidth = '140px';
// 定义变量内容
// const roleDialogRef = ref();
const state = reactive({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			search: '',
			pageNum: 1,
			pageSize: 10,
		},
	},
});
const form = ref({
	sno: '',
	sclass: '',
	birthdate: '',
	name: '',
});

//格式化后端返回来的时间
// function getLocalTime(value: any) {
// 	let time = value.uploadtime[0] + '-' + value.uploadtime[1] + '-' + value.uploadtime[2] + ' ' + value.uploadtime[3] + ':' + value.uploadtime[4] + ':' + value.uploadtime[5]
// 	return time
// }
// 添加作业

//获取所有作业

// 初始化用户权限
// const initUserAuth = () => {
// 	userAuth.value = userInfos.value.roles[0];
// };
// 用户权限改变时
const getAllstudent = async () => {
	studentApi()
		.getAllStudent()
		.then((res) => {
			state.tableData.data = res.data;
		});
};
// 页面加载时
onMounted(() => {
	// initUserAuth();
	getAllstudent();
});
</script>
<style scoped>
.demo-datetime-picker .demonstration {
	display: block;
	color: var(--el-text-color-secondary);
	font-size: 14px;
	margin-bottom: 20px;
}
</style>